$(function () {
    renderCateList()

    // 定义渲染分类列表的函数
    function renderCateList () {
        // 发起ajax请求
        axios({
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            // 请求成功 渲染文章分类列表下拉菜单
            let arr = ['<option value="">请选择分类</option>']
            res.data.forEach(ele => {
                if (ele.Id < 1) {
                    return;
                }
                arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
            })
            $('[name=cate_id]').empty().html(arr)
            layui.form.render()
        })
    }

    // 定义全局变量 q 接收表格所需参数
    let q = {
        pagenum: 1,
        pagesize: 5,
        cate_id: '',
        state: ''
    }

    // 初始化文章列表
    initCateList()
    function initCateList () {
        // 发起ajax请求
        axios({
            url: '/my/article/list',
            params: q
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            // 成功 渲染数据进表格
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${ele.pub_date}</td>
                <td>${ele.state}</td>
                <td>
                    <button data-id="${ele.Id}" class="layui-btn layui-btn-xs">编辑</button>
                    <button data-id="${ele.Id}" id="delBtn" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                </td>
            </tr>
                `)
            })
            $('tbody').empty().html(arr.join(''))

            renderPage(res.total)
        })
    }

    function renderPage (total) {
        //执行一个laypage实例
        // 分页器初始化
        var laypage = layui.laypage;
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            limit: q.pagesize,  //每页显示多少条
            curr: q.pagenum,   //默认显示第几页
            limits: [2, 3, 5, 10, 20],  //每页条数的select选择框
            layout: ['prev', 'page', 'next', 'limit', 'skip', 'count'],
            count: total, //数据总数，从服务端得到
            jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initCateList()
                }
            }
        });
    }

    // 获取下拉框监听改变值  --分类
    layui.form.on('select(selCate)', function (data) {
        q.cate_id = data.value
    })

    // 获取下拉框监听改变值  --分类
    layui.form.on('select(selStatus)', function (data) {
        q.state = data.value
    })
    // 筛选按钮 根据筛选项渲染数据
    $('form').on('submit', function (e) {
        e.preventDefault()
        // 重新渲染表格
        initCateList()
    })

    // 重置按钮
    $('form').on('reset', function () {
        q.cate_id = ''
        q.state = ''
        // 重新渲染表格
        initCateList()
    })

    // 删除文章
    $('tbody').on('click', '#delBtn', function () {
        // 先获取id
        let id = $(this).attr('data-id')
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            //发起ajax请求
            axios({
                url: '/my/article/delete/' + id
            }).then(({ data: res }) => {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                // 成功后提示
                layer.msg('恭喜您，删除文章成功！')
                initCateList()
            })
            layer.close(index);
        });
    })


})